<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 去除所有的内外间距 */
    *{
      padding: 0;
      margin: 0;
    }
    .content{
      width: 1200px;
      border: 10px solid red;
      height: 400px;
      padding-left: 20px; /*左边填充*/
      padding-right: 20px; /*右侧填充*/
      display: flex;
    }
    .content-l{
      width: 300px;
      height: 400px;
      background: #f1f1f1;
      margin-right: 10px;
    }
    .content-r{
      width: 900px;
    }
    .c-r-t{
      height: 50px;
      background: #f1f1f1;
    }
    .c-r-b{
      display: flex;
    }
    .banner{
      width: 600px;
      height: 340px;
      background: skyblue;
      margin-top: 10px;
      margin-right: 10px;
    }
    .user{
      width: 300px;
      height: 340px;
      margin-top: 10px;
      background: seagreen;
    }
    .flex{
      display: flex;
    }
    .evenly{
      justify-content: space-evenly;
    }
    .userInfo{
      height: 120px;
      text-align: center;
    }
    .btn{
      height: 80px;
      background: chocolate;
    }
    .collect{
      height: 80px;
      background: aquamarine;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="content-l">左侧</div>
    <div class="content-r">
      <div class="c-r-t">右侧上方</div>
      <div class="c-r-b">
        <div class="banner">右左</div>
        <div class="user">
          <div class="userInfo">
            一张图，一行字
          </div>
          <div class="flex evenly btn">
            <div>div1</div>
            <div>div2</div>
            <div>div3</div>
          </div>
          <div class="flex evenly collect">
            <div>div1</div>
            <div>div2</div>
            <div>div3</div>
            <div>div4</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>